<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#11b57c">
      <van-swipe-item v-for="item in html.imgurl">
        <img :src="item" alt />
      </van-swipe-item>
    </van-swipe>
    <!-- 标题=>促销 -->
    <div class="productInfor">
      <p class="title">{{html.name}}</p>
      <p class="subhead">
        <i class="label" v-if="html.PromotionTitle">{{html.PromotionTitle}}</i>
        <span>{{html.SubTitle}}</span>
      </p>
      <div class="price">
        <p class="priceIn">
          <span class="priceRed">
            <i>¥</i>
            {{html.SellPrice}}
          </span>
          <span class="priceOriginal" v-if="html.OriginalPrice">¥{{html.OriginalPrice}}</span>
        </p>
        <p class="area">
          产地：
          <span class="name">{{html.PlaceOfOrigin}}</span>
        </p>
      </div>
      <div class="sale lineTop" v-if="html.PromotionTypeText">
        <div class="saleIn">
          <i class="couponRedemption">促销</i>
          <div class="saleList saleListlast">
            <i class="label">{{html.PromotionTypeText}}</i>
            <p class="title">{{html.PromotionTitle}}</p>
          </div>
        </div>
      </div>
      <!---->
      <div class="sevenDay line-top backGauge">
        <span class="dian"></span>
        {{html.tuihuo}}
      </div>
    </div>
    <!-- 规格数量 -->
    <div class="norms">
      <div class="title line-bottom">
        规格
        <span class="choose active">{{html.Spec}}</span>
      </div>
      <div class="title title2 line-bottom">
        数量
        <van-stepper
          v-model="html.value"
          integer
          disable-input
          input-width="2rem"
          button-size="1.375rem"
          :max="html.MaxLimitCount"
        />
        <span class="hint" style>限购{{html.MaxLimitCount}}件</span>
      </div>
    </div>
    <!-- 送至地点 -->
    <div class="address clear">
      <p class="title">送至</p>
      <div class="addressDetail">
        <p class="add">
          <span></span>
          {{html.ShippingAddress}}
        </p>
        <p class="infor">
          <span>有货</span>
          {{html.fahuo}}
        </p>
      </div>
    </div>
    <!-- 评价 -->
    <div class="evaluate">
      <p class="title line-bottom">
        <span class="count">评价（2774）</span>
        <span class="number">
          查看全部
          <i class="back"></i>
        </span>
      </p>
      <div class="content line-bottom">
        <div class="txt clear">
          <div class="left">
            <img
              alt
              class="imgHeaer"
              src="https://img02.yiguo.com/e/web/150703/00781/140145/no-pic.jpg"
            />
            <p class="userName">13***62</p>
            <div class="stars-bg">
              <span class="star" style="width: 100%;"></span>
            </div>
            <span class="name">2020-06-23</span>
          </div>
        </div>
        <p class="text">超时未评价，系统默认好评</p>
      </div>
    </div>
    <!-- 查看详情 -->
    <div class="detail">
      <a href="javascript:;">查看图文详情</a>
    </div>
    <!-- 加入购物车 -->
    <div class="footer line-top">
      <a class="btn1" @click="gotohome">
        <i class="home"></i>首页
      </a>
      <a class="btn1">
        <i class="cart" @click="gotocart"></i> 购物车
        <i class="num">{{this.$store.state.cartnum}}</i>
      </a>
      <a href="javascript:;" class="btn2 btnRed" @click="addcards(html.id)">加入购物车</a>
    </div>
  </div>
</template>
<script>
import getapi from "@/api/ajax";
export default {
  data() {
    return {
      html: {
        imgurl: "",
        value: "1",
        name: "",
        Spec: "",
        tuihuo: "",
        fahuo: "",
        PromotionTitle: "",
        SubTitle: "",
        SellPrice: "",
        OriginalPrice: "",
        PlaceOfOrigin: "",
        PromotionTypeText: "",
        PromotionTitle: "",
        MaxLimitCount: "",
        ShippingAddress: "",
        id: ""
      }
    };
  },
  methods: {
    //加入购物车
    addcards(isid) {
      let data = {
        id: isid,
        num: this.html.value
      };
      this.$store.dispatch("addcard", data);
    },
    //路由跳转购物车
    gotocart() {
      this.$router.push({ path: "/cart" });
    },
    //路由跳转首页
    gotohome() {
      this.$router.push({ path: "/" });
    },
    //ajax获取数据
    async getdata() {
      let body = {
        CommodityId: "",
        CommodityCode: "6000039987"
      };
      body.CommodityCode = this.$route.query.id;
      try {
        let n = await getapi.getdata(
          "commodityapi/Commodity/GetCommodityInfo",
          body
        );
        let str = n.data.Data.CommodityInfo;
        this.html.imgurl = str.Pictures;
        this.html.name = str.Speces[0].CommodityName;
        this.html.Spec = str.Speces[0].Spec;
        this.html.tuihuo = str.CanNoReasonToReturnText;
        this.html.fahuo = str.DeliveryTips;
        this.html.PromotionTitle = str.PromotionTag;
        this.html.SubTitle = str.SubTitle;
        this.html.SellPrice = str.SellPrice;
        this.html.PlaceOfOrigin = str.PlaceOfOrigin;
        this.html.MaxLimitCount = str.MaxLimitCount;
        this.html.ShippingAddress = str.ShippingAddress;
        this.html.id = str.CommodityId;
        // this.html.PromotionTypeText =
        //   str.Data.CommodityInfo.CommodityPromotions[0].PromotionTypeText;
      } catch (err) {
        console.log(err);
      }
    }
  },
  created() {
    this.getdata();
    this.$store.dispatch("cartnum");
  }
};
</script>
<style lang="scss">
//轮播图
.my-swipe .van-swipe-item {
  color: #11b57c;
  text-align: center;
  background-color: #39a9ed;
  height: 100vw;
  img {
    width: 100%;
    height: 100%;
  }
}
//标题到促销部分
.productInfor {
  padding: 0.930688rem 0 0 0;
  background: #fff;
  margin-bottom: 0.6205rem;
  padding-bottom: 0;
  //大标题
  .title {
    line-height: 1.5rem;
    padding-right: 1rem;
    font-size: 1rem;
    font-weight: 500;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding-left: 1rem;
  }
  //小标题
  .subhead {
    padding-right: 1rem;
    font-size: 0.75rem;
    color: #808080;
    padding-top: 25.6px;
    line-height: 1.6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    padding-left: 1.06rem;
    height: 1.6rem;
    //折扣
    .label {
      font-size: 0.8rem;
      line-height: 0.8rem;
      background: #fff;
      display: inline-block;
      padding: 0.2rem 0.72rem 0.2rem 0.66rem;
      border: 1px solid #01b27a;
      border-radius: 0.8rem;
      color: #01b27a;
      margin-right: 0.5rem;
      font-style: normal;
      vertical-align: initial;
    }
    //小标题字体
    span {
      font-size: 0.92rem;
      color: #666;
    }
  }
  //价格数字
  .price {
    position: relative;
    padding: 0rem 0 0rem;
    overflow: hidden;
    padding: 0.8rem 0 0.78rem;
    padding-left: 1.06rem;
    padding-right: 1.06rem;
    .priceIn {
      float: left;
      .priceRed {
        font-size: 1.32rem;
        color: #eb3939;
        i {
          font-style: normal;
        }
      }
      .priceOriginal {
        font-size: 0.92rem;
        color: #ccc;
        text-decoration: line-through;
        padding-left: 0.96rem;
      }
    }
    .area {
      float: right;
      font-size: 0.8rem;
      color: #999999;
      margin-top: 0.44rem;
    }
  }
  //促销
  .sale {
    border-top: 1px solid #ddd;
    background: #fff;
    padding-bottom: 1.08rem;
    padding-left: 1.06rem;
    padding-right: 1.06rem;
    .couponRedemption {
      font-style: normal;
      font-size: 0.86rem;
      color: #999999;
      margin-right: 0.64rem;
      float: left;
      padding-top: 1.1rem;
    }
    .saleListTwo {
      position: relative;
      padding: 1.08rem 0rem 0rem 3.6rem;
      margin-left: 2.8rem;
      .label {
        position: absolute;
        top: 0.9rem;
        left: 0;
        background: #ffffff;
        font-size: 0.8rem;
        color: #01b27a;
        font-style: normal;
        border: 1px solid;
        border-radius: 0.8rem;
        padding: 0.18rem 0.66rem;
        line-height: 0.8rem;
      }
      .title {
        font-size: 0.8rem;
        color: #333;
        line-height: 1rem;
        padding-left: 0;
        height: 1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
    .saleList {
      position: relative;
      padding: 0.9rem 0.64rem 0.9rem 2.6rem;
      margin-left: 2.8rem;
      .label {
        position: absolute;
        top: 1.12rem;
        left: 0;
        padding: 0.1rem 0.26rem 0rem;
        background: #fff;
        border-radius: 0.3rem 0 0.3rem 0;
        font-size: 0.68rem;
        color: #11b57c;
        font-style: normal;
        border: 1px solid #11b57c;
      }
      .title {
        padding: 0.2rem 0;
        font-size: 0.8rem;
        color: #333;
        line-height: 1rem;
        height: 1rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }
  }
  //退货
  .backGauge {
    border-top: 1px solid #ddd;
    position: relative;
    height: 3.34rem;
    line-height: 3.34rem;
    padding: 0 1.06rem;
    color: #aaaaaa;
    font-size: 0.8rem;
    .dian {
      display: inline-block;
      width: 0.66rem;
      height: 0.66rem;
      border-radius: 50%;
      margin-right: 0.4rem;
      border: 1px solid;
    }
    .dian::after {
      content: "\FF01";
      position: absolute;
      left: 1.24rem;
      top: 0.8rem;
      transform: scaleY(0.5);
      transform-origin: 0 0;
    }
  }
}
//规格数量
.norms {
  background: #fff;
  margin-bottom: 0.6rem;
  //规格
  .title2 {
    display: flex;
    align-items: center;
  }
  .title {
    position: relative;
    color: #999999;
    font-size: 0.86rem;
    line-height: 2.4rem;
    padding: 0.7rem 1.06rem;
    border-bottom: solid 0.03125rem #ddd;

    //步进器
    .van-stepper {
      display: inline-block;
      width: 5rem;
      height: 1.735625rem;
      text-align: center;
      line-height: 1.735625rem;
      margin-left: 0.7rem;
    }
    .hint {
      padding-left: 0.7rem;
      color: #ff6353;
    }
    .choose.active {
      color: #01b27a;
      font-size: 0.875rem;
      padding: 0.46rem 1rem;
      box-sizing: border-box;
      border: 1px solid #01b27a;
      margin-left: 0.8rem;
      height: 0.94rem;
      line-height: 0.94rem;
      border-radius: 1.84rem;
    }
  }
}
//送至地点
.address {
  background: #fff;
  padding: 0.9rem 1.06rem;
  margin-bottom: 0.6rem;
  .title {
    float: left;
    color: #999999;
    font-size: 0.86rem;
    padding-right: 0.8rem;
    line-height: 1rem;
  }
  .addressDetail {
    float: left;
    .add {
      position: relative;
      padding-left: 0.8rem;
      font-size: 0.92rem;
      color: #333;
      line-height: 1rem;
      width: 19rem;
      padding-bottom: 0.8rem;
      span {
        position: absolute;
        top: 0.06rem;
        left: 0;
        display: inline-block;
        width: 0.66rem;
        height: 0.78rem;
        background: url(https://img05.yiguoimg.com/d/web/170830/00916/154520/dw.png)
          no-repeat;
        background-size: 100% 100%;
      }
    }
    .infor {
      line-height: 1.4rem;
      color: #333;
      font-size: 0.8rem;
      .infor {
        line-height: 1.4rem;
        color: #333;
        font-size: 0.8rem;
      }
    }
  }
}
//清除浮动
.clear:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
}
//评价
.evaluate {
  background: #fff;
  margin-bottom: 0.6rem;
  .title {
    position: relative;
    padding: 0.9rem 1.06rem;
    font-size: 0.86rem;
    color: #999;
    overflow: hidden;
    .number {
      float: right;
      padding-right: 1.2rem;
      color: #666;
      .back {
        position: absolute;
        right: 0.64rem;
        top: 50%;
        margin-top: -0.46rem;
        display: inline-block;
        width: 0.48rem;
        height: 0.94rem;
        background: url(https://img05.yiguoimg.com/d/web/170830/00911/152542/arrow.png)
          no-repeat;
        background-size: 100% 100%;
      }
    }
    :after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: #ddd;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform-origin: 0 100%;
      transform-origin: 0 100%;
    }
  }
  .content {
    position: relative;
    padding: 0.68rem 1.06rem 1.06rem;
    .txt {
      padding: 1.24rem 0 0rem;
      .left {
        position: relative;
        padding-left: 2.74rem;
        box-sizing: border-box;
        .imgHeaer {
          position: absolute;
          left: 0;
          top: -1.24rem;
          width: 2.14rem;
          height: 2.14rem;
          border-radius: 20px;
          display: inline-block;
        }
        .userName {
          position: absolute;
          left: 2.2rem;
          top: -1.24rem;
          padding-left: 0.6rem;
          font-size: 0.75rem;
        }
        .stars-bg {
          background-position: 0 -1.0625rem;
          width: 6.4375rem;
          overflow: hidden;
          .star {
            display: block;
            height: 1.125rem;
            background: url(https://img07.yiguoimg.com/d/web/180313/01314/114248/stars.png)
              no-repeat;
            background-size: auto 2.1875rem;
          }
        }
        .name {
          line-height: 1.125rem;
          position: absolute;
          top: -1.24rem;
          right: 0.64rem;
          color: #808080;
        }
      }
    }
    .text {
      font-size: 0.92rem;
      color: #333;
      line-height: 1.2rem;
      margin: 0;
      padding-top: 0.66rem;
      margin-left: 2.74rem;
    }
  }
}
//查看详情
.detail {
  padding: 1.4rem 0 4.7rem;
  background: #fff;
  a {
    display: block;
    width: 8rem;
    padding: 0.44rem 0.56rem;
    border: 1px solid #aaa;
    color: #999;
    font-size: 0.92rem;
    margin: 0 auto;
    border-radius: 0.1875rem;
    text-align: center;
    font-size: 0.875rem;
  }
}
//加入购物车
.footer {
  height: 3.2rem;
  padding-left: 0.64rem;
  padding-right: 0;
  position: fixed;
  z-index: 201;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  a {
    float: left;
  }
  .btn1 {
    position: relative;
    width: 15%;
    height: 3.2rem;
    text-align: center;
    font-size: 0.66rem;
    color: #8d8a8a;
    padding-top: 2rem;
    .home {
      position: absolute;
      top: 0.56rem;
      left: 50%;
      margin-left: -0.69rem;
      display: inline-block;
      width: 1.38rem;
      height: 1.22rem;
      background: url(//img05.yiguoimg.com/d/web/170830/00913/153914/home.png)
        no-repeat;
      background-size: 100% 100%;
    }

    .cart {
      position: absolute;
      top: 0.56rem;
      left: 50%;
      margin-left: -0.69rem;
      display: inline-block;
      width: 1.38rem;
      height: 1.22rem;
      background: url(//img05.yiguoimg.com/d/web/170830/00911/152542/nav_list.png)
        no-repeat;
      background-size: 100% 100%;
    }
    .num {
      position: absolute;
      top: 0.4rem;
      right: 0.2rem;
      display: inline-block;
      padding: 0.1rem 0.4rem;
      background: #ff6353;
      font-style: normal;
      color: #fff;
      border-radius: 0.625rem;
    }
  }
  .btnRed {
    float: right;
    background: #fb3d3d;
    color: #fff;
    width: 68%;
    font-size: 1.2rem;
    text-align: center;
    height: 3.2rem;
    line-height: 3.2rem;
    box-sizing: border-box;
  }
}
//清除浮动
.line-top:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: #ddd;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
</style>